/* =========================================================
   BOOK NOW PAGE - all selectors prefixed .bk- (no conflicts)
   ========================================================= */

.bk-page {
  --bk-navy: #0f1f4b;
  --bk-navy2: #1a2f6b;
  --bk-red: #e0202e;
  --bk-red-d: #b91824;
  --bk-ink: #16203a;
  --bk-mut: #5b6478;
  --bk-line: #e3e7ef;
  --bk-soft: #f5f7fb;
  --bk-ok: #1e8e4e;
  background: #fff;
  color: var(--bk-ink);
  font-family: "Inter", system-ui, sans-serif;
  padding: 24px 0 64px;
}

.bk-page *,
.bk-page *::before,
.bk-page *::after {
  box-sizing: border-box;
}

.bk-page [hidden] {
  display: none !important;
}

.bk-page button,
.bk-page input,
.bk-page textarea {
  font: inherit;
  color: inherit;
}

.bk-container {
  width: calc(100% - 32px);
  max-width: 1280px;
  margin: 0 auto;
}

/* breadcrumb */

.bk-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--bk-mut);
  margin-bottom: 18px;
}

.bk-crumbs a {
  color: var(--bk-navy);
  font-weight: 600;
}

.bk-crumbs a:hover {
  color: var(--bk-red);
}

/* layout 38 / 62 */

.bk-layout {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 24px;
  align-items: start;
}

.bk-course {
  position: sticky;
  top: 16px;
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(15, 31, 75, .08);
  overflow: hidden;
}

.bk-book {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(15, 31, 75, .08);
  overflow: hidden;
}

/* left column */

.bk-course-media {
  position: relative;
  height: 210px;
  background: linear-gradient(135deg, #1b1e26, #3a4256);
}

.bk-course-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bk-course-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--bk-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
}

.bk-course-body {
  padding: 20px;
}

.bk-course-body h1 {
  font: 800 26px/1.15 "Archivo", sans-serif;
  color: var(--bk-navy);
  margin: 0 0 10px;
}

.bk-course-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bk-mut);
  margin: 0 0 16px;
}

.bk-feats {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bk-feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bk-soft);
  border: 1px solid var(--bk-line);
  border-radius: 8px;
  padding: 9px 10px;
  transition: .2s;
}

.bk-feats li:hover {
  border-color: var(--bk-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 31, 75, .08);
}

.bk-feats svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--bk-red);
}

.bk-h {
  font: 800 16px/1.2 "Archivo", sans-serif;
  color: var(--bk-navy);
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bk-line);
}

.bk-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.bk-check li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}

.bk-check svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--bk-ok);
  margin-top: 1px;
}

.bk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.bk-table th,
.bk-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 10px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-table th {
  width: 36%;
  color: var(--bk-navy);
  font-weight: 700;
  background: var(--bk-soft);
}

.bk-table s {
  color: var(--bk-mut);
  margin-left: 6px;
  font-size: 12px;
}

.bk-table .bk-fee {
  color: var(--bk-red);
  font-weight: 800;
}

/* right column header + progress */

.bk-book-head {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--bk-navy);
  color: #fff;
  padding: 18px 22px;
}

.bk-book-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  flex: none;
}

.bk-book-icon svg {
  width: 24px;
  height: 24px;
}

.bk-book-head h2 {
  font: 800 22px/1.2 "Archivo", sans-serif;
  margin: 0;
  color: #fff;
}

.bk-book-head p {
  margin: 3px 0 0;
  font-size: 13px;
  color: #c9d2ee;
}

.bk-progress {
  padding: 12px 22px 0;
}

.bk-progress-bar {
  height: 6px;
  border-radius: 6px;
  background: var(--bk-line);
  overflow: hidden;
}

.bk-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bk-red);
  transition: width .35s ease;
}

.bk-progress small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--bk-mut);
}

/* sections */

.bk-form {
  padding: 6px 22px 24px;
}

.bk-sec {
  padding: 20px 0;
  border-bottom: 1px solid var(--bk-line);
}

.bk-sec:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.bk-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 17px/1.2 "Archivo", sans-serif;
  color: var(--bk-navy);
  margin: 0 0 14px;
}

.bk-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bk-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
}

/* calendar + sessions */

.bk-dt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.bk-dt.is-online {
  grid-template-columns: minmax(0, 1fr);
}

.bk-cal {
  border: 1px solid var(--bk-line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.bk-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--bk-navy);
}

.bk-cal-head button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--bk-line);
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: .2s;
}

.bk-cal-head button:hover:not(:disabled) {
  border-color: var(--bk-red);
  color: var(--bk-red);
}

.bk-cal-head button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.bk-cal-dow,
.bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.bk-cal-dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bk-mut);
  padding: 4px 0;
}

.bk-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: #a7aebf;
  cursor: not-allowed;
  transition: .15s;
}

.bk-day.is-pad {
  visibility: hidden;
}

.bk-day.has {
  color: var(--bk-navy);
  font-weight: 700;
  background: #eef2fb;
  border-color: #cfd8ee;
  cursor: pointer;
}

.bk-day.has:hover {
  border-color: var(--bk-red);
  transform: scale(1.06);
}

.bk-day.is-full {
  text-decoration: line-through;
}

.bk-day.is-sel,
.bk-day.is-sel:hover {
  background: var(--bk-red);
  border-color: var(--bk-red);
  color: #fff;
}

.bk-legend {
  list-style: none;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--bk-mut);
}

.bk-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bk-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.lg-has {
  background: #eef2fb;
  border: 1px solid #cfd8ee;
}

.lg-sel {
  background: var(--bk-red);
}

.lg-off {
  background: #fff;
  border: 1px solid var(--bk-line);
}

.bk-sessions-wrap h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--bk-navy);
}

.bk-sessions {
  display: grid;
  gap: 10px;
}

.bk-sess {
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--bk-line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  transition: .2s;
}

.bk-sess:hover:not(:disabled) {
  border-color: var(--bk-red);
  box-shadow: 0 6px 16px rgba(15, 31, 75, .1);
  transform: translateY(-2px);
}

.bk-sess.is-sel {
  border-color: var(--bk-red);
  background: #fff5f6;
  box-shadow: 0 0 0 3px rgba(224, 32, 46, .12);
}

.bk-sess.is-full {
  opacity: .55;
  cursor: not-allowed;
}

.bk-sess-date {
  font-weight: 800;
  color: var(--bk-navy);
  font-size: 14px;
}

.bk-sess-venue {
  font-size: 13px;
  color: var(--bk-ink);
}

.bk-sess-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.bk-seats {
  color: var(--bk-ok);
  font-weight: 700;
}

.bk-seats.low {
  color: #c46a00;
}

.bk-seats.none {
  color: var(--bk-red);
}

.bk-sess-fee {
  font-weight: 800;
  color: var(--bk-red);
  font-size: 15px;
}

.bk-empty {
  font-size: 13px;
  color: var(--bk-mut);
  background: var(--bk-soft);
  border-radius: 8px;
  padding: 12px;
}

/* fields */

.bk-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bk-span2 {
  grid-column: 1 / -1;
}

.bk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-bottom: 14px;
}

.bk-grid2 .bk-field {
  margin-bottom: 0;
}

.bk-field label,
.bk-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-navy);
}

.bk-field small {
  font-weight: 500;
  color: var(--bk-mut);
}

.bk-req {
  color: var(--bk-red);
}

.bk-field input[type="text"],
.bk-field input[type="email"],
.bk-field input[type="tel"],
.bk-field input[type="date"],
.bk-field textarea {
  width: 100%;
  border: 1.5px solid var(--bk-line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.bk-field textarea {
  resize: vertical;
}

.bk-field input:focus,
.bk-field textarea:focus {
  outline: none;
  border-color: var(--bk-navy2);
  box-shadow: 0 0 0 3px rgba(26, 47, 107, .15);
}

.bk-field input[aria-invalid="true"] {
  border-color: var(--bk-red);
  background: #fff8f8;
}

.bk-err {
  min-height: 0;
  font-size: 12.5px;
  color: var(--bk-red);
  font-weight: 600;
}

.bk-err:empty {
  display: none;
}

.bk-radios {
  display: flex;
  gap: 12px;
}

.bk-radio {
  position: relative;
  cursor: pointer;
}

.bk-radio input {
  position: absolute;
  opacity: 0;
}

.bk-radio span {
  display: inline-block;
  min-width: 84px;
  text-align: center;
  padding: 9px 16px;
  border: 1.5px solid var(--bk-line);
  border-radius: 8px;
  font-weight: 700;
  transition: .2s;
}

.bk-radio input:checked+span {
  background: var(--bk-red);
  border-color: var(--bk-red);
  color: #fff;
}

.bk-radio input:focus-visible+span {
  box-shadow: 0 0 0 3px rgba(26, 47, 107, .25);
}

.bk-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  background: #fff7e6;
  border: 1px solid #f3d99b;
  border-radius: 8px;
  padding: 9px 11px;
  color: #7a5200;
}

/* payment option cards */

.bk-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bk-pay.single {
  grid-template-columns: minmax(0, 1fr);
}

.bk-pay-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.bk-pay-card input {
  position: absolute;
  opacity: 0;
}

.bk-pay-box {
  display: grid;
  gap: 4px;
  border: 1.5px solid var(--bk-line);
  border-radius: 10px;
  padding: 14px;
  transition: .2s;
  height: 100%;
}

.bk-pay-card:hover .bk-pay-box {
  border-color: var(--bk-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 31, 75, .08);
}

.bk-pay-card input:checked+.bk-pay-box {
  border-color: var(--bk-red);
  background: #fff5f6;
  box-shadow: 0 0 0 3px rgba(224, 32, 46, .12);
}

.bk-pay-card input:focus-visible+.bk-pay-box {
  outline: 3px solid rgba(26, 47, 107, .35);
}

.bk-pay-t {
  font-weight: 800;
  color: var(--bk-navy);
}

.bk-pay-amt {
  font: 800 24px/1.1 "Archivo", sans-serif;
  color: var(--bk-red);
}

.bk-pay-sub {
  font-size: 12.5px;
  color: var(--bk-mut);
}

/* payment details */

.bk-brands {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
}

.bk-brands li {
  border: 1px solid var(--bk-line);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--bk-navy);
  background: var(--bk-soft);
}

.bk-secure {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--bk-mut);
  margin: 0 0 14px;
}

.bk-summary {
  background: var(--bk-soft);
  border: 1px solid var(--bk-line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}

.bk-summary h4 {
  margin: 0 0 8px;
  color: var(--bk-navy);
  font-size: 14px;
}

.bk-sum {
  margin: 0;
  display: grid;
  gap: 6px;
}

.bk-sum div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
}

.bk-sum dt {
  color: var(--bk-mut);
}

.bk-sum dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.bk-sum .bk-total {
  border-top: 1px dashed #c9d0e0;
  padding-top: 8px;
  margin-top: 4px;
  font-size: 15px;
}

.bk-sum .bk-total dd {
  color: var(--bk-red);
}

.bk-check-lbl {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500 !important;
  cursor: pointer;
}

.bk-check-lbl input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--bk-red);
  flex: none;
}

.bk-form-msg {
  margin: 0 0 10px;
}

/* buttons */

.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bk-red);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px 22px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: .2s;
  text-decoration: none;
}

.bk-btn:hover:not(:disabled) {
  background: var(--bk-red-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(224, 32, 46, .3);
}

.bk-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.bk-btn.ghost {
  background: #fff;
  color: var(--bk-navy);
  border: 1.5px solid var(--bk-line);
}

.bk-btn.ghost:hover:not(:disabled) {
  border-color: var(--bk-navy);
  box-shadow: none;
  background: #fff;
}

.bk-btn-pay {
  width: 100%;
  min-height: 54px;
  font-size: 17px;
}

.bk-demo-note {
  text-align: center;
  font-size: 12px;
  color: var(--bk-mut);
  margin: 8px 0 0;
}

.bk-link {
  color: var(--bk-red);
  font-weight: 700;
}

/* picker (missing / invalid course) */

.bk-picker {
  background: var(--bk-soft);
  border: 1px solid var(--bk-line);
  border-radius: 12px;
  padding: 28px;
}

.bk-picker h1 {
  font: 800 28px/1.15 "Archivo", sans-serif;
  color: var(--bk-navy);
  margin: 0 0 8px;
}

.bk-picker>p {
  color: var(--bk-mut);
  margin: 0 0 18px;
}

.bk-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.bk-picker-grid a {
  display: grid;
  gap: 4px;
  background: #fff;
  border: 1.5px solid var(--bk-line);
  border-radius: 10px;
  padding: 14px;
  transition: .2s;
}

.bk-picker-grid a:hover {
  border-color: var(--bk-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 31, 75, .1);
}

.bk-picker-grid b {
  color: var(--bk-navy);
}

.bk-picker-grid span {
  color: var(--bk-red);
  font-weight: 800;
}

/* modal */

.bk-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 17, 40, .6);
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
}

.bk-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  outline: none;
  color: var(--bk-ink);
  font-family: "Inter", system-ui, sans-serif;
}

.bk-modal-box h2 {
  font: 800 22px/1.2 "Archivo", sans-serif;
  color: var(--bk-navy);
  margin: 0 0 12px;
}

.bk-modal-box p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bk-mut);
  margin: 0 0 12px;
}

.bk-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.bk-modal-actions .bk-btn {
  flex: 1 1 160px;
}

.bk-demo-flag {
  background: #fff7e6;
  border: 1px solid #f3d99b;
  color: #7a5200 !important;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: 700;
}

.bk-spin {
  width: 38px;
  height: 38px;
  border: 4px solid var(--bk-line);
  border-top-color: var(--bk-red);
  border-radius: 50%;
  margin: 10px auto 14px;
  animation: bkspin .8s linear infinite;
}

.bk-ok-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e6f6ed;
  color: var(--bk-ok);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.bk-ok-ico svg {
  width: 30px;
  height: 30px;
}

.bk-ref {
  text-align: center;
  font: 800 22px/1.2 "Archivo", sans-serif;
  color: var(--bk-navy);
  background: var(--bk-soft);
  border: 1px dashed #b9c3de;
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0 14px;
  letter-spacing: .5px;
}

.bk-center {
  text-align: center;
}

body.bk-lock {
  overflow: hidden;
}

@keyframes bkspin {
  to {
    transform: rotate(360deg);
  }
}

/* responsive */

@media (max-width: 1000px) {

  .bk-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-course {
    position: static;
  }

  .bk-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  .bk-dt {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-grid2,
  .bk-pay {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-feats {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-form,
  .bk-progress {
    padding-left: 16px;
    padding-right: 16px;
  }

  .bk-book-head {
    padding: 16px;
  }

  .bk-picker {
    padding: 18px;
  }

  .bk-picker-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-course-body h1 {
    font-size: 22px;
  }

  .bk-modal-box {
    padding: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .bk-page *,
  .bk-modal * {
    transition: none !important;
    animation: none !important;
  }

}

/* =========================================
   SIA TOP-UP REFRESHER COURSE PICKER
\========================================= */

\#bkPicker {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

\#bkPickerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  margin-top: 24px;
  align-items: stretch;
}

.topup-course-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 26px;
  border: 1px solid #e0e5ef;
  border-radius: 16px;
  background: #ffffff;
  color: #14234b;
  box-shadow: 0 8px 28px rgba(17, 35, 75, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.topup-course-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(17, 35, 75, 0.12);
}

.topup-label {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 5px;
  background: #fff0f1;
  color: #e9233a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.topup-course-option h3 {
  margin: 18px 0 10px;
  font-size: 21px;
  line-height: 1.4;
  color: #14234b;
}

.topup-course-option p {
  margin: 0 0 16px;
  color: #667085;
  font-size: 14px;
  line-height: 1.7;
}

.topup-duration {
  margin-bottom: 12px;
  font-size: 13px;
  color: #475467;
}

.topup-price {
  margin: 0 0 22px;
  font-size: 34px;
  font-weight: 800;
  color: #14234b;
}

.topup-book-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding: 14px 18px;
  border-radius: 9px;
  background: #142653;
  color: #a30f0f !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 700;
  box-sizing: border-box;
}

.topup-book-btn:hover {
  background: #140b0c;
}

.topup-book-btn span {
  font-size: 20px;
}

/* Tablet */

@media (max-width: 768px) {

  #bkPickerGrid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .topup-course-option {
    padding: 22px;
  }

  .topup-course-option h3 {
    font-size: 19px;
  }

}

/* Mobile */

@media (max-width: 480px) {

  #bkPickerGrid {
    gap: 14px;
    margin-top: 18px;
  }

  .topup-course-option {
    padding: 18px;
    border-radius: 12px;
  }

  .topup-price {
    font-size: 30px;
  }

  .topup-book-btn {
    padding: 13px 15px;
  }

}

/* SGS BOOKING PAGE — isolated styles, responsive from mobile to desktop */

.sgs-booking-page {
  --bk-red: #ed1723;
  --bk-ink: #111318;
  --bk-muted: #66707d;
  --bk-line: #e5e7ec;
  --bk-dark: #0b0d11;
  color: var(--bk-ink);
  background: #f6f7f9;
  font-family: Inter, Arial, sans-serif;
  overflow-x: clip
}

.sgs-booking-page * {
  box-sizing: border-box
}

.sgs-booking-page img {
  max-width: 100%;
  display: block
}

.sgs-booking-page button,
.sgs-booking-page input,
.sgs-booking-page select,
.sgs-booking-page textarea {
  font: inherit
}

.booking-wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto
}

.booking-hero {
  padding: 38px 0 28px;
  color: #fff;
  background: radial-gradient(ellipse at 85% 0, rgba(237, 23, 35, .22), transparent 38%), linear-gradient(120deg, #08090c, #171a21)
}

.booking-kicker,
.summary-kicker,
.step-kicker {
  margin: 0 0 9px;
  color: #ff555e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase
}

.booking-hero h1 {
  margin: 0;
  color: #fff;
  font: 900 clamp(30px, 4vw, 46px)/1.05 Archivo, Inter, sans-serif;
  letter-spacing: -.04em
}

.booking-hero h1 span {
  color: #ff3944
}

.booking-hero>div>p:not(.booking-kicker):not(.progress-label) {
  margin: 10px 0 20px;
  color: #c8cdd5;
  font-size: 13px
}

.booking-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 9px;
  background: #3a3d44
}

.booking-progress span {
  display: block;
  width: 20%;
  height: 100%;
  background: var(--bk-red);
  transition: width .25s ease
}

.progress-label {
  margin: 7px 0 0;
  color: #bfc4cc;
  font-size: 10px;
  text-align: right
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(270px, .78fr) minmax(0, 1.45fr);
  gap: 24px;
  align-items: start;
  padding-top: 30px;
  padding-bottom: 64px
}

.course-summary,
.booking-form-panel {
  min-width: 0;
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 19, 24, .07)
}

.course-summary {
  position: sticky;
  top: 20px;
  overflow: hidden;
  padding: 0 24px 24px
}

.summary-image {
  height: 190px;
  margin: 0 -24px 22px;
  overflow: hidden;
  background: linear-gradient(130deg, #171a21, #343943)
}

.summary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.course-summary h2 {
  margin: 0 0 10px;
  color: var(--bk-ink);
  font: 800 25px/1.12 Archivo, Inter, sans-serif;
  letter-spacing: -.035em
}

.summary-description {
  margin: 0 0 20px;
  color: var(--bk-muted);
  font-size: 12px;
  line-height: 1.7
}

.summary-facts {
  border-top: 1px solid var(--bk-line)
}

.summary-facts>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bk-line)
}

.summary-facts span {
  color: var(--bk-muted);
  font-size: 11px
}

.summary-facts strong {
  max-width: 58%;
  font-size: 11px;
  text-align: right
}

.summary-change {
  display: inline-block;
  margin-top: 18px;
  color: var(--bk-red);
  font-size: 11px;
  font-weight: 800
}

.summary-note {
  margin: 18px 0 0;
  padding: 12px;
  border-radius: 8px;
  color: #666f7b;
  background: #f5f6f8;
  font-size: 10px;
  line-height: 1.65
}

.booking-form-panel {
  padding: clamp(18px, 3vw, 32px)
}

.form-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px
}

.step-kicker {
  margin-bottom: 8px
}

.form-top h2 {
  margin: 0 0 7px;
  font: 800 clamp(23px, 3vw, 31px)/1.1 Archivo, Inter, sans-serif;
  letter-spacing: -.035em
}

.form-top p:not(.step-kicker) {
  margin: 0;
  color: var(--bk-muted);
  font-size: 12px;
  line-height: 1.55
}

.step-count {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  background: var(--bk-red);
  font: 800 16px Archivo, sans-serif
}

.step-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 24px 0 26px
}

.step-tabs span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 35px;
  padding: 7px 4px;
  border-bottom: 2px solid #e6e8ed;
  color: #969da7;
  font-size: 10px;
  font-weight: 800
}

.step-tabs span b {
  font-size: 9px;
  font-weight: 700
}

.step-tabs span.active {
  border-color: var(--bk-red);
  color: var(--bk-red)
}

.step-tabs span.done {
  border-color: #20232a;
  color: #20232a
}

.booking-step[hidden] {
  display: none
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 14px
}

.field-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  color: #252932;
  font-size: 11px;
  font-weight: 700
}

.field-grid .full {
  grid-column: 1/-1
}

.field-grid input,
.field-grid select,
.field-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #dfe2e8;
  border-radius: 7px;
  outline: none;
  color: #171a20;
  background: #fff;
  font-size: 12px;
  font-weight: 400;
  transition: border-color .2s, box-shadow .2s
}

.field-grid textarea {
  min-height: 100px;
  resize: vertical
}

.field-grid input:focus,
.field-grid select:focus,
.field-grid textarea:focus {
  border-color: var(--bk-red);
  box-shadow: 0 0 0 3px rgba(237, 23, 35, .09)
}

.field-note {
  margin: 17px 0 0;
  color: #727b87;
  font-size: 10px;
  line-height: 1.6
}

.payment-intro {
  margin: 0 0 16px;
  color: var(--bk-muted);
  font-size: 12px;
  line-height: 1.7
}

.payment-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid var(--bk-line);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .2s,
}

.payment-choice:has(input:checked) {
  border-color: var(--bk-red);
  background: #fff7f7
}

.payment-choice input {
  margin-top: 3px;
  accent-color: var(--bk-red)
}

.payment-choice span {
  display: grid;
  gap: 5px
}

.payment-choice b {
  font-size: 12px
}

.payment-choice small {
  color: var(--bk-muted);
  font-size: 10px;
  line-height: 1.5
}

.review-title {
  margin: 0 0 12px;
  font-size: 15px
}

.review-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 20px
}

.review-summary div {
  padding: 12px;
  border-radius: 7px;
  background: #f5f6f8
}

.review-summary span {
  display: block;
  margin-bottom: 5px;
  color: var(--bk-muted);
  font-size: 10px
}

.review-summary b {
  font-size: 11px;
  overflow-wrap: anywhere
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  color: #505864;
  font-size: 10px;
  line-height: 1.6
}

.terms-check input {
  margin-top: 3px;
  accent-color: var(--bk-red)
}

.form-error {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 7px;
  color: #a20f19;
  background: #fff0f1;
  font-size: 11px
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 27px;
  padding-top: 20px;
  border-top: 1px solid var(--bk-line)
}

.back-btn,
.next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 45px;
  padding: 12px 17px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.back-btn {
  border-color: #dfe2e8;
  color: #30343c;
  background: #fff
}

.back-btn:disabled {
  opacity: .45;
  cursor: not-allowed
}

.next-btn {
  color: #fff;
  background: var(--bk-red)
}

.next-btn:hover {
  background: #c90e19;
  transform: translateY(-1px)
}

.success-message {
  margin-top: 15px;
  padding: 14px;
  border: 1px solid #b9e2c4;
  border-radius: 8px;
  color: #14532d;
  background: #f0fdf4;
  font-size: 12px;
  line-height: 1.6
}

@media(max-width:850px) {
  .booking-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 22px
  }

  .course-summary {
    position: static;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 18px;
    padding: 18px
  }

  .summary-image {
    grid-column: 1;
    grid-row: 1/5;
    width: 160px;
    height: 160px;
    margin: 0;
    border-radius: 8px
  }

  .summary-kicker,
  .course-summary h2,
  .summary-description {
    grid-column: 2
  }

  .summary-kicker {
    align-self: end
  }

  .course-summary h2 {
    font-size: 22px
  }

  .summary-description {
    margin-bottom: 10px
  }

  .summary-facts,
  .summary-change,
  .summary-note {
    grid-column: 1/-1
  }

  .summary-facts {
    margin-top: 16px
  }
}

@media(max-width:560px) {
  .booking-wrap {
    width: calc(100% - 28px)
  }

  .booking-hero {
    padding: 29px 0 22px
  }

  .booking-hero h1 {
    font-size: 32px
  }

  .booking-layout {
    padding-bottom: 38px
  }

  .course-summary {
    display: block;
    padding: 16px
  }

  .summary-image {
    width: auto;
    height: 165px;
    margin: 0 0 18px
  }

  .summary-kicker {
    margin-bottom: 7px
  }

  .course-summary h2 {
    font-size: 23px
  }

  .booking-form-panel {
    padding: 18px 15px
  }

  .form-top h2 {
    font-size: 25px
  }

  .step-count {
    flex-basis: 38px;
    width: 38px;
    height: 38px
  }

  .step-tabs {
    gap: 2px;
    margin: 20px 0
  }

  .step-tabs span {
    flex-direction: column;
    gap: 2px;
    min-height: 42px;
    font-size: 9px
  }

  .step-tabs span b {
    font-size: 8px
  }

  .field-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .field-grid .full {
    grid-column: auto
  }

  .review-summary {
    grid-template-columns: 1fr
  }

  .form-actions {
    gap: 9px
  }

  .back-btn,
  .next-btn {
    padding: 11px 12px;
    font-size: 10px
  }

  .summary-facts>div {
    gap: 10px
  }

  .summary-facts strong {
    max-width: 60%
  }
}

@media(prefers-reduced-motion:reduce) {
  .sgs-booking-page * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }
}

/* ==========================================================
   BOOK NOW UI REFRESH v2 — BLACK / RED / WHITE + ANIMATION
   Only .bk-* classes. No logic, IDs or other page classes touched.
   ========================================================== */

.bk-page {
  --bk-navy: #0d0d0d;
  --bk-navy2: #262626;
  --bk-red: #ed1b2f;
  --bk-red-d: #c91024;
  --bk-ink: #151515;
  --bk-mut: #666666;
  --bk-line: #e4e4e4;
  --bk-soft: #f6f6f6;
  --bk-ok: #1f8a4c;
  background: #ffffff;
  color: var(--bk-ink);
}

/* ---------- keyframes ---------- */
@keyframes bkRise {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bkFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bkSlideIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bkLine {
  from { width: 0; }
  to   { width: 64px; }
}
@keyframes bkGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.12); }
}
@keyframes bkStripes {
  to { background-position: 28px 0; }
}
@keyframes bkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(237, 27, 47, .45); }
  100% { box-shadow: 0 0 0 14px rgba(237, 27, 47, 0); }
}
@keyframes bkPop {
  0%   { opacity: 0; transform: translateY(18px) scale(.9); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bkTick {
  0%   { transform: scale(0) rotate(-30deg); }
  70%  { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bkShimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes bkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---------- breadcrumb ---------- */
.bk-crumbs { color: #8a8a8a; font-weight: 500; animation: bkSlideIn .5s ease both; }
.bk-crumbs a { color: #0d0d0d; font-weight: 700; text-decoration: none; transition: color .2s; }
.bk-crumbs a:hover { color: var(--bk-red); }
.bk-crumbs span { color: #c4c4c4; }

/* ==========================================================
   COURSE PICKER v3 — black banner + floating numbered cards
   ========================================================== */
.bk-picker {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0d0d 0, #0d0d0d 210px, #f3f3f3 210px);
  border: 0;
  border-radius: 22px;
  padding: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
  animation: bkRise .6s cubic-bezier(.2, .8, .2, 1) both;
}

/* red slanted block in the banner */
.bk-picker::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 210px;
  background: linear-gradient(120deg, #ff4455, #ed1b2f 55%, #b50f21);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
  animation: bkFade 1s .2s both;
  pointer-events: none;
}

.bk-picker h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 42px 44px 0;
  color: #ffffff;
  font-size: 34px;
  letter-spacing: -.03em;
  animation: bkSlideIn .6s .1s ease both;
}

.bk-picker h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--bk-red);
  animation: bkLine .8s .4s ease both;
}

.bk-picker > p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 14px 44px 0;
  color: #cfcfcf;
  font-size: 15px;
  animation: bkFade .8s .3s both;
}

/* ---------- cards ---------- */
.bk-picker-grid {
  counter-reset: bkc;
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 36px 44px 24px;
}

.bk-picker-grid a {
  counter-increment: bkc;
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  min-height: 156px;
  padding: 22px 24px 20px;
  color: #0d0d0d;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .09), inset 0 -4px 0 #0d0d0d;
  animation: bkRise .55s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}

.bk-picker-grid a:nth-child(1)  { animation-delay: .15s; }
.bk-picker-grid a:nth-child(2)  { animation-delay: .21s; }
.bk-picker-grid a:nth-child(3)  { animation-delay: .27s; }
.bk-picker-grid a:nth-child(4)  { animation-delay: .33s; }
.bk-picker-grid a:nth-child(5)  { animation-delay: .39s; }
.bk-picker-grid a:nth-child(6)  { animation-delay: .45s; }
.bk-picker-grid a:nth-child(7)  { animation-delay: .51s; }
.bk-picker-grid a:nth-child(8)  { animation-delay: .57s; }
.bk-picker-grid a:nth-child(9)  { animation-delay: .63s; }
.bk-picker-grid a:nth-child(10) { animation-delay: .69s; }
.bk-picker-grid a:nth-child(11) { animation-delay: .75s; }
.bk-picker-grid a:nth-child(12) { animation-delay: .81s; }
.bk-picker-grid a:nth-child(13) { animation-delay: .87s; }
.bk-picker-grid a:nth-child(14) { animation-delay: .93s; }
.bk-picker-grid a:nth-child(15) { animation-delay: .99s; }
.bk-picker-grid a:nth-child(16) { animation-delay: 1.05s; }

/* big outlined number */
.bk-picker-grid a::before {
  content: counter(bkc, decimal-leading-zero);
  position: absolute;
  top: 6px;
  right: 16px;
  font: 900 62px/1 "Archivo", sans-serif;
  color: transparent;
  -webkit-text-stroke: 1.5px #dedede;
  pointer-events: none;
  transition: -webkit-text-stroke-color .3s, transform .4s;
}

/* round arrow button */
.bk-picker-grid a::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0f0f0;
  color: #0d0d0d;
  font-size: 17px;
  font-weight: 800;
  transition: transform .35s, background .3s, color .3s;
}

.bk-picker-grid a:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(237, 27, 47, .24), inset 0 -4px 0 var(--bk-red);
}

.bk-picker-grid a:hover::before { -webkit-text-stroke-color: var(--bk-red); transform: scale(1.08) translateY(2px); }
.bk-picker-grid a:hover::after { background: var(--bk-red); color: #ffffff; transform: rotate(-45deg); }
.bk-picker-grid a:active { transform: translateY(-3px) scale(.98); }

/* type tag: CLASSROOM (first 8) / ONLINE (rest) */
.bk-picker-grid b {
  display: block;
  padding-right: 54px;
  color: #0d0d0d;
  font: 800 17px/1.3 "Archivo", sans-serif;
}

.bk-picker-grid b::before {
  content: "CLASSROOM";
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 4px;
  background: #0d0d0d;
  color: #ffffff;
  font: 800 10px/1 "Inter", sans-serif;
  letter-spacing: .12em;
}

.bk-picker-grid a:nth-child(n + 9) b::before {
  content: "ONLINE";
  background: var(--bk-red);
}

.bk-picker-grid small {
  color: #6b6b6b;
  font-size: 12.5px;
  font-weight: 600;
}

/* price pill */
.bk-picker-grid span {
  display: inline-block;
  align-self: auto;
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #0d0d0d;
  color: #ffffff;
  font: 800 18px/1 "Archivo", sans-serif;
  transition: background .3s, transform .3s;
}

.bk-picker-grid a:hover span { background: var(--bk-red); transform: scale(1.06); }

/* back link */
.bk-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin: 0 44px 40px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0d0d0d;
  color: #ffffff;
  text-decoration: none;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.bk-link:hover {
  background: var(--bk-red);
  color: #ffffff;
  text-decoration: none;
  transform: translateX(-4px);
  box-shadow: 0 10px 22px rgba(237, 27, 47, .3);
}

@media (max-width: 1000px) {
  .bk-picker h1,
  .bk-picker > p { padding-left: 28px; padding-right: 28px; }
  .bk-picker-grid { margin-left: 28px; margin-right: 28px; }
  .bk-link { margin-left: 28px; margin-right: 28px; }
}

@media (max-width: 700px) {
  .bk-picker { background: linear-gradient(180deg, #0d0d0d 0, #0d0d0d 250px, #f3f3f3 250px); }
  .bk-picker::before { width: 55%; height: 250px; }
  .bk-picker h1 { padding: 30px 18px 0; font-size: 27px; }
  .bk-picker > p { padding: 12px 18px 0; font-size: 14px; }
  .bk-picker-grid { margin: 32px 16px 20px; gap: 14px; }
  .bk-link { margin: 0 16px 28px; }
}

/* ==========================================================
   BOOKING PAGE — white cards, black header, red accents
   ========================================================== */
.bk-course,
.bk-book {
  border: 1px solid var(--bk-line);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

.bk-course { animation: bkSlideIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.bk-book { border-top: 0; animation: bkRise .6s .1s cubic-bezier(.2, .8, .2, 1) both; }

/* left column */
.bk-course-media { background: linear-gradient(135deg, #0d0d0d, #383838); overflow: hidden; }
.bk-course-media img { transition: transform .8s ease; }
.bk-course:hover .bk-course-media img { transform: scale(1.06); }

.bk-course-badge {
  background: var(--bk-red);
  color: #fff;
  border-radius: 5px;
  animation: bkFloat 3s ease-in-out infinite;
}

.bk-course-body h1,
.bk-h,
.bk-table th,
.bk-sessions-wrap h4,
.bk-field label,
.bk-label,
.bk-pay-t,
.bk-sess-date,
.bk-sec-h { color: #0d0d0d; }

.bk-h { border-bottom: 2px solid var(--bk-line); position: relative; }
.bk-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 44px;
  height: 2px;
  background: var(--bk-red);
}

.bk-feats li { background: #f6f6f6; border-color: #e4e4e4; }
.bk-feats li:hover { border-color: var(--bk-red); background: #0d0d0d; color: #fff; }
.bk-feats svg { color: var(--bk-red); }
.bk-check svg { color: var(--bk-red); }
.bk-check li { animation: bkSlideIn .5s ease both; }
.bk-check li:nth-child(1) { animation-delay: .2s; }
.bk-check li:nth-child(2) { animation-delay: .3s; }
.bk-check li:nth-child(3) { animation-delay: .4s; }
.bk-check li:nth-child(4) { animation-delay: .5s; }
.bk-check li:nth-child(5) { animation-delay: .6s; }

.bk-selected-option {
  background: #fff5f6 !important;
  border-color: #f2c4c9 !important;
  border-left-color: var(--bk-red) !important;
  color: #151515 !important;
}

.bk-table th { background: #f6f6f6; }
.bk-table tr { transition: background .2s; }
.bk-table tr:hover td { background: #fff5f6; }
.bk-table .bk-fee { color: var(--bk-red); }

/* header + progress */
.bk-book-head {
  position: relative;
  background: #0d0d0d;
  overflow: hidden;
}
.bk-book-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bk-red), #ff6a75, var(--bk-red));
  background-size: 200% 100%;
  animation: bkShimmer 3s linear infinite;
}
.bk-book-head p { color: #cfcfcf; }
.bk-book-icon { background: var(--bk-red); color: #fff; animation: bkPulse 2.2s ease-out infinite; }

.bk-progress-bar { background: #ececec; }
.bk-progress-bar span {
  background-color: var(--bk-red);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%);
  background-size: 28px 28px;
  animation: bkStripes 1s linear infinite;
}

/* sections fade up one by one */
.bk-sec { animation: bkRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.bk-sec:nth-child(1) { animation-delay: .20s; }
.bk-sec:nth-child(2) { animation-delay: .30s; }
.bk-sec:nth-child(3) { animation-delay: .40s; }
.bk-sec:nth-child(4) { animation-delay: .50s; }
.bk-sec:nth-child(5) { animation-delay: .60s; }

.bk-num { background: var(--bk-red); color: #fff; box-shadow: 0 0 0 4px rgba(237, 27, 47, .14); }

/* calendar */
.bk-cal { border-color: var(--bk-line); border-radius: 14px; }
.bk-cal-head { color: #0d0d0d; }
.bk-cal-head button:hover:not(:disabled) { border-color: var(--bk-red); color: #fff; background: var(--bk-red); }

.bk-day.has { color: #0d0d0d; background: #f5f5f5; border-color: #dcdcdc; }
.bk-day.has:hover { border-color: var(--bk-red); background: #fff5f6; transform: scale(1.12); }
.bk-day.is-sel,
.bk-day.is-sel:hover {
  background: var(--bk-red);
  border-color: var(--bk-red);
  color: #fff;
  animation: bkPulse 1.4s ease-out;
}

.lg-has { background: #f5f5f5; border: 1px solid #dcdcdc; }
.lg-sel { background: var(--bk-red); }

/* sessions */
.bk-sess { animation: bkSlideIn .45s ease both; }
.bk-sess:nth-child(2) { animation-delay: .08s; }
.bk-sess:nth-child(3) { animation-delay: .16s; }
.bk-sess:nth-child(4) { animation-delay: .24s; }
.bk-sess:hover:not(:disabled) { border-color: var(--bk-red); box-shadow: inset 4px 0 0 var(--bk-red), 0 10px 22px rgba(0, 0, 0, .1); }
.bk-sess.is-sel {
  border-color: var(--bk-red);
  background: #fff5f6;
  box-shadow: inset 4px 0 0 var(--bk-red), 0 0 0 3px rgba(237, 27, 47, .12);
}
.bk-sess-fee { color: var(--bk-red); }
.bk-seats { color: var(--bk-ok); }
.bk-seats.low { color: #b45f00; }
.bk-seats.none { color: var(--bk-red); }

/* fields */
.bk-field input,
.bk-field textarea { transition: border-color .25s, box-shadow .25s, transform .25s; }
.bk-field input:focus,
.bk-field textarea:focus {
  border-color: var(--bk-red);
  box-shadow: 0 0 0 4px rgba(237, 27, 47, .12);
  transform: translateY(-1px);
}
.bk-field input[aria-invalid="true"] { border-color: var(--bk-red); background: #fff8f8; }
.bk-err:not(:empty) { animation: bkSlideIn .3s ease both; }
.bk-req { color: var(--bk-red); }

.bk-radio input:checked + span { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.bk-radio input:focus-visible + span { box-shadow: 0 0 0 3px rgba(237, 27, 47, .3); }
.bk-check-lbl input { accent-color: var(--bk-red); }

.bk-note { animation: bkRise .4s ease both; }

/* payment */
.bk-pay-card:hover .bk-pay-box { border-color: var(--bk-red); }
.bk-pay-card input:checked + .bk-pay-box {
  border-color: var(--bk-red);
  background: #fff5f6;
  box-shadow: inset 4px 0 0 var(--bk-red), 0 0 0 3px rgba(237, 27, 47, .12);
}
.bk-pay-card input:focus-visible + .bk-pay-box { outline: 3px solid rgba(237, 27, 47, .35); }
.bk-pay-amt { color: var(--bk-red); }

.bk-brands li { background: #f6f6f6; color: #0d0d0d; border-color: #e0e0e0; transition: .2s; }
.bk-brands li:hover { background: #0d0d0d; color: #fff; transform: translateY(-2px); }
.bk-secure svg { color: var(--bk-red); }

.bk-summary { background: #f6f6f6; border-color: #e4e4e4; border-left: 4px solid var(--bk-red); }
.bk-summary h4 { color: #0d0d0d; }
.bk-sum .bk-total { border-top-color: #cfcfcf; }
.bk-sum .bk-total dd { color: var(--bk-red); }

/* buttons */
.bk-btn { position: relative; overflow: hidden; background: var(--bk-red); color: #fff; }
.bk-btn:hover:not(:disabled) { background: var(--bk-red-d); box-shadow: 0 10px 24px rgba(237, 27, 47, .35); }
.bk-btn.ghost { background: #fff; color: #0d0d0d; border-color: #d6d6d6; }
.bk-btn.ghost:hover:not(:disabled) { border-color: #0d0d0d; background: #fff; }

.bk-btn-pay {
  background: #0d0d0d;
  animation: bkPulse 2.4s ease-out infinite;
}
.bk-btn-pay::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.bk-btn-pay:hover:not(:disabled) { background: var(--bk-red); }
.bk-btn-pay:hover:not(:disabled)::before { left: 130%; }
.bk-btn-pay:disabled { animation: none; }

.bk-link:focus-visible,
.bk-picker-grid a:focus-visible,
.bk-btn:focus-visible,
.bk-day:focus-visible,
.bk-sess:focus-visible {
  outline: 3px solid rgba(237, 27, 47, .5);
  outline-offset: 3px;
}

/* modal */
.bk-modal { background: rgba(0, 0, 0, .72); animation: bkFade .25s ease both; }
.bk-modal-box { border-top: 5px solid var(--bk-red); animation: bkPop .45s cubic-bezier(.2, .8, .2, 1) both; }
.bk-modal-box h2 { color: #0d0d0d; }
.bk-spin { border-color: #e6e6e6; border-top-color: var(--bk-red); }
.bk-ok-ico { background: #fdecee; color: var(--bk-red); animation: bkTick .6s .15s cubic-bezier(.2, .8, .2, 1) both; }
.bk-ref { background: #f6f6f6; color: #0d0d0d; border-color: #bdbdbd; animation: bkRise .5s .3s ease both; }
.bk-note,
.bk-demo-flag { background: #fff5f6; border-color: #f2c4c9; color: #8a1220 !important; }

/* responsive */
@media (max-width: 1000px) {
  .bk-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .bk-picker-grid { grid-template-columns: minmax(0, 1fr); }
}

/* respect reduced-motion preference (incl. pseudo elements) */
@media (prefers-reduced-motion: reduce) {
  .bk-page *,
  .bk-page *::before,
  .bk-page *::after,
  .bk-modal,
  .bk-modal * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   v2 FIX — remove extra space / sideways overflow
   ========================================================== */
.bk-page { overflow-x: clip; }
.bk-container { max-width: 1280px; }

.bk-picker {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.bk-picker-grid {
  margin-bottom: 22px;
  grid-auto-flow: row dense;
}

.bk-picker-grid a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* last lonely card fills the whole row — no empty black gap */
.bk-picker-grid a:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .bk-picker-grid a:last-child:nth-child(3n + 1) { grid-column: auto; }
  .bk-picker-grid a:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .bk-picker-grid a:last-child:nth-child(n) { grid-column: auto; }
}

/* slide-in animations must not push the page sideways */
@keyframes bkSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   BOOKING PAGE v4 — black course card + stacked white step cards
   (shown after a course is clicked). Only .bk-* classes.
   ========================================================== */

.bk-page:has(.bk-layout:not([hidden])) { background: #f2f2f2; }

.bk-layout { gap: 26px; }

/* ---------- LEFT: black course card ---------- */
.bk-course {
  background: #0d0d0d;
  border: 0;
  border-radius: 22px;
  color: #ffffff;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .22);
}

.bk-course-media { height: 230px; }
.bk-course-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, #0d0d0d);
  pointer-events: none;
}
.bk-course-badge { z-index: 2; }

.bk-course .bk-course-body h1 { color: #ffffff; font-size: 28px; letter-spacing: -.02em; }

.bk-course .bk-course-desc {
  color: #b9b9b9;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bk-course .bk-selected-option {
  background: rgba(237, 27, 47, .14) !important;
  border: 1px solid rgba(237, 27, 47, .45) !important;
  border-left: 4px solid #ed1b2f !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}
.bk-course .bk-selected-option p { color: #d6d6d6; font-size: 13px; }

.bk-course .bk-feats li {
  background: #1a1a1a;
  border-color: #2c2c2c;
  color: #ffffff;
  border-radius: 12px;
}
.bk-course .bk-feats li:hover { background: #ed1b2f; border-color: #ed1b2f; color: #fff; }
.bk-course .bk-feats li:hover svg { color: #fff; }

.bk-course .bk-h { color: #ffffff; border-bottom-color: #2c2c2c; }
.bk-course .bk-check li { color: #e4e4e4; }
.bk-course .bk-check svg { color: #ff4455; }

.bk-course .bk-table th { background: #1a1a1a; color: #ffffff; border-bottom-color: #2a2a2a; }
.bk-course .bk-table td { color: #dcdcdc; border-bottom-color: #2a2a2a; }
.bk-course .bk-table tr:hover td { background: #161616; }
.bk-course .bk-table .bk-fee { color: #ff4455; font-size: 16px; }
.bk-course .bk-table s,
.bk-course .bk-table small { color: #8f8f8f; }

/* ---------- RIGHT: header banner ---------- */
.bk-book {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.bk-book-head {
  position: relative;
  border-radius: 22px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}
.bk-book-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient(120deg, #ff4455, #ed1b2f 55%, #b50f21);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.bk-book-head > * { position: relative; z-index: 1; }
.bk-book-head h2 { font-size: 24px; letter-spacing: -.02em; }
.bk-book-icon { border-radius: 14px; width: 52px; height: 52px; }

/* ---------- progress pill ---------- */
.bk-progress {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
}
.bk-progress-bar { height: 8px; border-radius: 8px; }
.bk-progress small { font-weight: 700; color: #0d0d0d; }

/* ---------- step cards ---------- */
.bk-form { padding: 0; }

.bk-sec,
.bk-sec:last-child {
  background: #ffffff;
  border: 0;
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07), inset 5px 0 0 var(--bk-red);
}

.bk-sec-h { font-size: 19px; margin-bottom: 18px; }
.bk-num {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(237, 27, 47, .35);
}

/* ---------- calendar + sessions ---------- */
.bk-cal { background: #fafafa; border: 0; border-radius: 18px; padding: 16px; }
.bk-day.has { background: #ffffff; border-color: #e3e3e3; }
.bk-day.has:hover { background: #fff5f6; border-color: var(--bk-red); }

.bk-sess {
  border: 1.5px solid #ececec;
  border-radius: 16px;
  background: #fafafa;
}
.bk-sess.is-sel {
  background: #0d0d0d;
  border-color: #0d0d0d;
  box-shadow: inset 5px 0 0 var(--bk-red), 0 12px 26px rgba(0, 0, 0, .22);
}
.bk-sess.is-sel .bk-sess-date,
.bk-sess.is-sel .bk-sess-venue { color: #ffffff; }
.bk-sess.is-sel .bk-seats { color: #6ee7a0; }
.bk-sess.is-sel .bk-sess-fee { color: #ff6a75; }

/* ---------- fields ---------- */
.bk-field input[type="text"],
.bk-field input[type="email"],
.bk-field input[type="tel"],
.bk-field input[type="date"],
.bk-field textarea {
  background: #f6f6f6;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  padding: 13px 14px;
}
.bk-field input[type="text"]:focus,
.bk-field input[type="email"]:focus,
.bk-field input[type="tel"]:focus,
.bk-field input[type="date"]:focus,
.bk-field textarea:focus { background: #ffffff; }

/* ---------- payment option cards ---------- */
.bk-pay-box { border-radius: 16px; padding: 18px; background: #fafafa; border-color: #ececec; }
.bk-pay-card input:checked + .bk-pay-box {
  background: #0d0d0d;
  border-color: #0d0d0d;
  box-shadow: inset 5px 0 0 var(--bk-red), 0 12px 26px rgba(0, 0, 0, .22);
}
.bk-pay-card input:checked + .bk-pay-box .bk-pay-t { color: #ffffff; }
.bk-pay-card input:checked + .bk-pay-box .bk-pay-amt { color: #ff4455; }
.bk-pay-card input:checked + .bk-pay-box .bk-pay-sub { color: #bdbdbd; }

/* ---------- last step: dark payment card ---------- */
.bk-sec:last-child {
  background: #0d0d0d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25), inset 5px 0 0 var(--bk-red);
}
.bk-sec:last-child .bk-sec-h { color: #ffffff; }
.bk-sec:last-child .bk-brands li { background: #1b1b1b; border-color: #333; color: #ffffff; }
.bk-sec:last-child .bk-brands li:hover { background: var(--bk-red); border-color: var(--bk-red); }
.bk-sec:last-child .bk-secure { color: #b5b5b5; }
.bk-sec:last-child .bk-summary { background: #171717; border-color: #2a2a2a; border-left: 4px solid var(--bk-red); border-radius: 14px; }
.bk-sec:last-child .bk-summary h4 { color: #ffffff; }
.bk-sec:last-child .bk-sum dt { color: #a6a6a6; }
.bk-sec:last-child .bk-sum dd { color: #ffffff; }
.bk-sec:last-child .bk-sum .bk-total { border-top-color: #3a3a3a; }
.bk-sec:last-child .bk-sum .bk-total dd { color: #ff4455; font-size: 18px; }
.bk-sec:last-child .bk-check-lbl span { color: #dcdcdc; }
.bk-sec:last-child .bk-err { color: #ff6a75; }
.bk-sec:last-child .bk-demo-note { color: #8f8f8f; }

.bk-btn.bk-btn-pay {
  background: var(--bk-red);
  color: #ffffff;
  border-radius: 14px;
}
.bk-btn.bk-btn-pay:hover:not(:disabled) {
  background: #ffffff;
  color: #0d0d0d;
  box-shadow: 0 12px 28px rgba(255, 255, 255, .15);
}

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .bk-sec,
  .bk-sec:last-child { padding: 18px; border-radius: 16px; }
  .bk-book-head { padding: 18px; border-radius: 16px; }
  .bk-book-head::before { width: 42%; }
  .bk-course { border-radius: 18px; }
  .bk-course-media { height: 190px; }
}


/* Fix Edit Details button visibility in booking review modal */
#bkModalBody button,
#bkModalBody .bk-btn {
    color: #10213f !important;
    background: #f1f4f9 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

#bkModalBody button:hover,
#bkModalBody .bk-btn:hover {
    background: #e2e8f0 !important;
    color: #10213f !important;
}